<template>
    <div :class="{ 'has-logo': showLogo, 'has-open': !uniqueOpened ,'topnavleftsw':settings.sideTheme=='sw-OA-index'}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? themeColor : variables.menuLightBackground }">
        <el-menu ref="topNavMenu" :default-active="activeMenu" mode="horizontal"  @select="(P_Unid) => handleSelect(P_Unid,true)">
            <template v-for="(item) in sidebarRouters">
              <app-link :to="resolvePath(item.path, item.query)" :key="item.path" v-if="!item.hidden">
                <el-menu-item :index="resolvePath(item.path)" >
                    <item :icon="(showIcon||settings.sideTheme!='sw-OA-index') &&( item.meta && item.meta.icon || 'unordered-list')" :title="item.meta.title" />
                </el-menu-item>
              </app-link>
            </template>
        </el-menu>
    </div>
  </template>
  
  <script>
  import { mapGetters, mapState } from "vuex";
  import path from 'path'
  import { isExternal } from 'hc-core/utils/validate'
  import variables from "@/assets/styles/variables.scss";
  import SidebarItem from "../../layout/components/Sidebar/SidebarItemtop.vue";
  import Item from '../../layout/components/SidebarLeft/Item'
  import AppLink from '../../layout/components/Sidebar/Link'
  export default {
    components: { SidebarItem,Item,AppLink},
    created()
    {
      let tampStr = localStorage.getItem("sidebarExpand_" + this.userInfo.unid);
      if (tampStr)
      {
        try
        {
          this.defaultOpeneds = JSON.parse(tampStr);
        } catch (err)
        {
  
        }
      }
    },
    data()
    {
      this.onlyOneChild = null
      return {
        // 顶部图标显示
        showIcon: window.HC_config.VUE_APP_SHOWTOPICON,
        topMenus: [],
         // 顶部栏初始数
        visibleNumber: 8,
        // 当前激活菜单的 index
        currentIndex: undefined,
        uniqueOpened: window.HC_config.VUE_APP_UNIQUEOPEND || false,
        isOpenAll: false
      }
    },
    computed: {
      ...mapState(["settings"]),
      ...mapGetters(["sidebarRouters", "sidebar", "userInfo","themeColor"]),
      activeMenu()
      {
        const route = this.$route;
        const { meta, path } = route;
        // if set path, the sidebar will highlight the path you set
        if (meta.activeMenu)
        {
          return meta.activeMenu;
        }
        return path;
      },
      openedIndexArr()
      {
        this.isOpenAll = true;
        let defaultOpeneds = null;
        let tampStr = localStorage.getItem("sidebarExpand_" + this.userInfo.unid);
        if (tampStr)
        {
          try
          {
            defaultOpeneds = JSON.parse(tampStr);
          } catch (err)
          {
  
          }
        }
        //默认展开的菜单项
        if (!defaultOpeneds)
        {
          let tampArr = [];
          this.sidebarRouters.forEach(element =>
          {
            if (element.meta && element.meta.moduleIsExpanded)
            {
              tampArr.push(element.path);
            }
          });
          return tampArr;
        }
        else
        {
  
          return defaultOpeneds;
        }
      },
      showLogo()
      {
        return this.$store.state.settings.sidebarLogo;
      },
      variables()
      {
        return variables;
      },
      isCollapse()
      {
        return !this.sidebar.opened;
      }
    },
    methods: {
        resolvePath(routePath, routeQuery)
        {
            if (isExternal(routePath))
            {
                return routePath
            }
            if (isExternal(this.basePath))
            {
                return this.basePath
            }
            if (routeQuery)
            {
                let query = JSON.parse(routeQuery);
                return { path: path.resolve(this.basePath, routePath), query: query }
            }
            return path.resolve(this.basePath, routePath)
        },
        //获取模块分类作为顶部分类菜单
        getModuleClass()
        {

        queryModuleType().then((res) =>
        {
            this.topMenus = res.result.data.map((e) =>
            {
            return {
                label: e.typeCommonname,
                value: e.unid,
                icon: e.icon || "menu",
                mrdklj: e.mrdklj
            };
            });
            if (this.topMenus.length > 0)
            {
            let moduleTypeUnid = localStorage.getItem("activeModuleType_" + this.userInfo.unid);
            if (moduleTypeUnid)
            {
                let findIndex = this.topMenus.findIndex(pre_item =>
                {
                return pre_item.value == moduleTypeUnid;
                })
                if (findIndex > -1)
                {
                this.activeMenu = moduleTypeUnid;
                }
                else
                {
                this.activeMenu = this.topMenus[0].value;
                }
            }
            else
            {
                this.activeMenu = this.topMenus[0].value;
            }
            this.handleSelect(this.activeMenu,false);
            }
        });
        },
        // 根据宽度计算设置显示栏数
        setVisibleNumber()
        {
        const width = document.body.getBoundingClientRect().width / 3;
        this.visibleNumber = parseInt(width / 85);
        },
        //提供给外部切换顶部导航栏的
        changeTopByIndex(P_ModuleTypeUnid)
        {
        if (P_ModuleTypeUnid && this.$refs.topNavMenu.items[P_ModuleTypeUnid])
        {
            this.$refs.topNavMenu.handleItemClick(this.$refs.topNavMenu.items[P_ModuleTypeUnid]);
        }
        // this.handleSelect(topMenuId);
        },
        // 菜单选择事件
        handleSelect(P_Unid,P_Flag)
        {
          //缓存到localStorage
          let topMenuItem = this.sidebarRouters.find(item => item.path === P_Unid);

          console.log("--------触发修改---------")
          console.log(P_Flag);
          console.log(topMenuItem);
          console.log("--------触发修改---------")

          if (topMenuItem)
          {
              if(topMenuItem.children.length>0){
                this.$store.commit("SET_SIDEBAR_CHILD_ROUTERS", topMenuItem.children || []);
              }else{
                this.$store.commit("SET_SIDEBAR_CHILD_ROUTERS", topMenuItem || []);
              }
          }

        },
        // 当前激活的路由
        activeRoutes(p_TopMenuItem)
        {
          console.log(p_TopMenuItem)
          console.log(p_TopMenuItem.children)

          this.$store.commit("SET_SIDEBAR_ROUTERS", p_TopMenuItem.children || []);
        },
        ishttp(url)
        {
          return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
        }
    },

  };
  </script>
  
  
  <style lang="scss" scoped>
  #hc-menu.theme-light {
    background: url("~@/assets/images/menu-bg.png") center bottom no-repeat;
  }
  ::v-deep.topnavleftsw .el-menu-item{
      height: 40px;
      line-height: 40px;
  }
  .el-menu.el-menu--horizontal{
    display: flex;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    border: none;
  }
  .hc-menu {
    padding-bottom: 40px;
  }
  .btn-Expand {
    font-size: 12px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
  }
  
  .has-logo {
    &.has-open {
      .el-scrollbar {
        height: calc(100% - 80px) !important;
      }
    }
    .el-scrollbar {
      height: calc(100% - 50px) !important ;
    }
  }
  </style>